<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
interface User {
  date: string
  name: string
  address: string
}
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
const tableData: User[] = [
  {
    date: '鸣潮',
    name: '2024-1-20',
    address: '账单提醒',
  },
  {
    date: '原神',
    name: '2024-1-1',
    address: '账单提醒',
  },
  {
    date: '崩坏：星穹铁道',
    name: '2024-4-10',
    address: '通知',
  },
  {
    date: '绝区零',
    name: '2024-7-4',
    address: '通知',
  },
    {
      date: '第五人格',
      name: '2024-1-1',
      address: '账单提醒',
    },
    {
      date: '火影忍者',
      name: '2024-4-10',
      address: '通知',
    },
    {
      date: '王者荣耀',
      name: '2024-7-4',
      address: '通知',
    },
    {
      date: '圆梦之星',
      name: '2024-1-1',
      address: '账单提醒',
    },
    {
      date: '部落冲突',
      name: '2024-4-10',
      address: '通知',
    },
]
</script>

<template>

  <el-table :data="filterTableData" class="table" >
    <el-table-column type="selection" width="55" />
    <el-table-column label="标题内容" prop="date" />
    <el-table-column label="时间" prop="name" />
    <el-table-column label="类型" prop="address" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="large" placeholder="搜索相关消息" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          查看
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
  <el-row class="pagination">
    <el-button mb-2 @click="toggle" class="tranlate">Switch Language</el-button>
    <br />
    <el-config-provider :locale="locale">
    <el-col span="8" :offset="8">
      <el-pagination offset="5" background layout="prev, pager, next, jumper" :total="1000" />
    </el-col>
    </el-config-provider>



  </el-row>
</div>

</template>


<style scoped>

.table{
  width: 85%;
  margin-left:10px;
  margin-top:20px;
}
.pagination{
  margin-top:20px;
  margin-left: 400px;
}
.tranlate{
  display: none;
}
</style>